<template>
  <div class="stock-in">
    <div class="stock-in__tabs">
      <n-tabs type="line" @update:value="tabIndex = Number($event)">
        <n-tab name="0">一键入库</n-tab>
        <n-tab name="1">手动入库</n-tab>
        <n-tab name="2">扫码入库</n-tab>
        <n-tab name="3">入库记录</n-tab>
      </n-tabs>
    </div>
    <div class="stock-in__content">
      <auto-stock-in v-if="tabIndex === 0"></auto-stock-in>
      <manual-stock-in v-if="tabIndex === 1"></manual-stock-in>
      <scan-code-stock-in v-if="tabIndex === 2"></scan-code-stock-in>
      <stock-in-log v-if="tabIndex === 3"></stock-in-log>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import autoStockIn from "./@fragment/auto.vue";
import manualStockIn from "./@fragment/manual.vue";
import scanCodeStockIn from "./@fragment/scan-code.vue";
import stockInLog from "./@fragment/log.vue";

let tabIndex = ref(0);
</script>

<style lang="less" scoped>
.stock-in {
  display: flex;
  flex-direction: column;
  height: 100%;

  * {
    line-height: 1;
  }

  &__tabs {
    margin: 21px 30px 0;
    height: 60px;
    background: #f8f8f8;
    box-sizing: border-box;

    /deep/ .n-tabs-bar {
      height: 6px;
      border-radius: 2px;
    }
  }

  &__content {
    flex: 1;
    padding-top: 30px;
    height: 100% - 60px;
    box-sizing: border-box;
    overflow: hidden;

    &--input {
      display: grid;
      grid-template-columns: auto 380px auto auto;
      align-items: center;
      justify-content: start;
      margin-bottom: 28px;

      > span {
        margin-right: 19px;
        font-size: 26px;
        color: #2e323d;
      }

      > button {
        margin-left: 18px;
        width: 114px;
        height: 60px;
        font-size: 26px;
        background: #f8f8f8;
        border: 1px solid #aaaaaa;
        border-radius: 5px;
        color: #2e323d;
      }
    }

    /deep/ td {
      vertical-align: middle;
    }
  }
}
</style>